<template>
  <div class="base-content">
    <div class="basic-info">
      <el-form ref="filterForm" inline :model="filterForm">
        <el-form-item :label="deviceManage.deviceName">
          <el-input
            v-model="filterForm.deviceName"
            clearable
            :placeholder="deviceManage.deviceName"
            @keyup.enter.native="getList('filter')"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            v-loading="searchLoading"
            type="primary"
            @click="getList('filter')"
            >{{ operateType.query }}</el-button
          >
          <el-button @click="cancelForm">{{ operateType.clear }}</el-button>
        </el-form-item>
        <el-row>
          <el-button v-rights="'Add'" type="primary" @click="onNew">{{
            operateType.add
          }}</el-button>

          <!-- <el-button
          icon="el-icon-document-copy"
          type="primary"
          @click="importData"
          >导入</el-button>

          <el-button
          icon="el-icon-document-copy"
          type="primary"
          @click="importData"
          >导出</el-button> -->
        </el-row>
      </el-form>
      <el-table
        v-loading="tableLoad"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        height="calc(100% - 130px)"
      >
        <el-table-column
          type="index"
          :label="deviceManage.serialNumber"
          width="50"
        >
        </el-table-column>
        <el-table-column prop="deviceNum" :label="deviceManage.deviceNumber" />
        <el-table-column prop="deviceName" :label="deviceManage.deviceName" />
        <el-table-column prop="deviceModel" :label="deviceManage.deviceModel" />
        <el-table-column
          prop="deviceManufactor"
          :label="deviceManage.deviceFactory"
        />
        <el-table-column
          prop="installAddress"
          :label="deviceManage.installationAddress"
        />
        <el-table-column
          prop="throwInDate"
          :formatter="dateFormat"
          :label="deviceManage.releaseDate"
        />
        <el-table-column
          prop="calibrationCycle"
          :label="deviceManage.calibrationCycle"
        />
        <el-table-column
          prop="instrumentStatusCode"
          :label="deviceManage.instrumentStatus"
        >
          <template slot-scope="{ row }">
            <span
              v-if="row.instrumentStatusCode === 1"
              style="color: #32cd32"
              >{{ deviceManage.qualified }}</span
            >
            <span
              v-else-if="row.instrumentStatusCode === 2"
              style="color: #cccc00"
              >{{ deviceManage.mutatisMutandis }}</span
            >
            <span v-else style="color: #ff0000">{{
              deviceManage.deactivate
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template slot-scope="{ row }">
            <div class="base-table-operation">
              <el-link type="primary" @click="lock(row)">{{
                operateType.view
              }}</el-link>
              <el-link type="primary" @click="Edit(row)">{{
                operateType.redact
              }}</el-link>
              <el-link type="danger" @click="Delete(row)">{{
                operateType.delete
              }}</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <BasePagination
        :total="pageInfo.total"
        :current-page="pageInfo.pageIndex"
        :page-count="pageInfo.pageCount"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>
    <SysBusinessDeviceInfoEdit
      v-model="isShowDialog"
      :read-only="readonly"
      :edit-id="editId"
      @success="DialogCall"
    />
  </div>
</template>

<script>
import {
  deleteRecord,
  getList,
} from "../../../api/DeviceManage/SysBusinessDevice.js";
import SysBusinessDeviceInfoEdit from "./SysBusinessDeviceInfoEdit.vue";

export default {
  name: "SysBusinessDeviceInfoList",
  components: { SysBusinessDeviceInfoEdit },
  data() {
    return {
      // 是否显示弹窗
      isShowDialog: false,
      // 表格加载
      tableLoad: false,
      // 是否禁用文本框
      readonly: false,
      // 搜索加载
      searchLoading: false,
      // 数据源
      tableData: [],
      // 编辑|查看数据Id
      editId: "",
      // 查询集合
      filterForm: {
        deviceName: "",
      },
      dialogFormVisible: false,
      // 分页参数
      pageInfo: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    deviceManage() {
      return this.$t("DeviceManage") || {};
    },
  },
  // 初始化加载
  created() {
    this.getList();
  },
  methods: {
    // 获取表格数据
    getList(flag) {
      this.searchLoading = true;
      this.tableLoad = true;
      // flag === filter 表示用户输入了搜索条件 从第一页开始查
      if (flag) {
        this.pageInfo.pageIndex = 1;
      }
      getList({
        ...this.filterForm,
        ...this.pageInfo,
      })
        .then((res) => {
          this.tableData = res.data.dataList;
          this.pageInfo.total = res.data.total;
          this.tableLoad = false;
          this.searchLoading = false;
        })
        .catch(() => {
          this.tableLoad = false;
          this.searchLoading = false;
        });
    },
    // 新增
    onNew() {
      this.readonly = false;
      this.editId = "";
      this.isShowDialog = true;
    },
    // 删除
    Delete(rowData) {
      this.Helper.deleteConfirm(() => {
        this.loading = true;
        deleteRecord({ id: rowData.id })
          .then((res) => {
            this.getList();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    // 关闭窗体回调函数
    DialogCall() {
      this.getList();
    },
    // 查看
    lock(row) {
      this.readonly = true;
      this.editId = row.id;
      this.isShowDialog = true;
    },
    // 编辑
    Edit(row) {
      this.readonly = false;
      this.editId = row.id;
      this.isShowDialog = true;
    },
    // 查询函数
    onQuery() {
      this.getList();
    },
    // 清空筛选条件
    cancelForm() {
      this.filterForm.deviceName = "";
      this.getList("filter");
    },
    // 切换页码
    changePage(page) {
      this.pageInfo.pageIndex = page;
      this.getList();
    },
    sizeChange(val) {
      this.pageInfo.pageIndex = 1;
      this.pageInfo.pageSize = val;
      this.getList();
    },
    // 格式日期
    dateFormat(row) {
      const dtc = new Date(row.throwInDate);
      // 获取月,默认月份从0开始
      let dtuMonth = dtc.getMonth() + 1;
      // 获取日
      let dtuDay = dtc.getDate();
      // 处理1-9月前面加0
      if (dtuMonth < 10) {
        dtuMonth = "0" + (dtc.getMonth() + 1);
      }
      // 处理1-9天前面加0
      if (dtuDay < 10) {
        dtuDay = "0" + dtc.getDate();
      }
      return dtc.getFullYear() + "-" + dtuMonth + "-" + dtuDay;
    },
  },
};
</script>
